"use client";

/*
 * @Author: hongbin
 * @Date: 2025-04-30 15:31:41
 * @LastEditors: hongbin
 * @LastEditTime: 2025-05-01 16:45:32
 * @Description:
 */
import { FC, useEffect, useRef, useState } from "react";
import { styled } from "styled-components";
import * as ECharts from "echarts";

interface IProps {
    data: number;
    color1?: string;
    color2?: string;
}

/** 仪表盘 */
const GaugeChart: FC<IProps> = ({ data = 0 ,color1 = '#00FDFB',color2 = '#00c6fd'}) => {
    const divRef = useRef<HTMLDivElement>(null);
    const ChartRef = useRef<ECharts.ECharts>(null);

    useEffect(() => {
        if (divRef.current) {
            const chart = ECharts.init(divRef.current);

            ChartRef.current = chart;

            const bgColor = "#16242A";
            const primary = "#02544c69";

            chart.setOption({
                backgroundColor: "transparent",
                series: [
                    {
                        type: "gauge",
                        startAngle: 0,
                        endAngle: 360,
                        itemStyle: {
                            // shadowColor: "#fff",
                            // shadowBlur: 10,
                        },
                        progress: {
                            show: true,
                            width: 7,
                            // roundCap: true,
                            overlap: true,
                            itemStyle: {
                                // borderColor: "#fff",
                                // borderWidth: 1,
                                // opacity: 1,
                                // borderType: [5, 10],
                                // borderDashOffset: 5,
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: color1 || "#00FDFB" }, // 渐变起始色
                                        { offset: 1, color: color2 || "#00c6fd" }, // 渐变结束色
                                    ],
                                },
                                // shadowColor: "#f20075",
                                // shadowBlur: 10,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                width: 10,
                                // color: [[1, "#1F1016"]], // 背景圆环
                                color: [[1, bgColor]], // 背景圆环
                            },
                        },
                        pointer: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: "{value}%",
                            fontSize: 18,
                            fontFamily: "MyCustomFont",
                            color: "#e3fcfa",
                            textShadowColor: primary,
                            textShadowBlur: 1,
                            textBorderColor: primary,
                            textBorderWidth: 1,
                            offsetCenter: [0, "0%"],
                        },
                        data: [
                            {
                                value: data,
                            },
                        ],
                        z: 1,
                    },
                    // 紧贴外圈与背景同色 利用遮蔽下层颜色产生间隔效果
                    {
                        type: "gauge",
                        startAngle: 0,
                        endAngle: 360,
                        itemStyle: {
                            color: "",
                        },
                        progress: {
                            show: true,
                            width: 3,
                            itemStyle: {
                                color: bgColor,
                            },
                        },
                        pointer: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        detail: {
                            show: false,
                        },
                        data: [
                            {
                                value: 100,
                            },
                        ],
                        z: 2,
                    },
                    // 开始处齐点
                    {
                        type: "gauge",
                        startAngle: 0,
                        endAngle: 360,
                        itemStyle: {
                            color: "",
                        },
                        progress: {
                            show: true,
                            width: 10,
                            itemStyle: {
                                // borderColor: "#fffae5",
                                // borderWidth: 1,
                                // borderType: [5, 10],
                                // borderDashOffset: 5,
                                color: color2 || "#a2bdf2",
                                shadowColor: "#4e83f3",
                                shadowBlur: 2,
                            },
                        },
                        pointer: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        detail: {
                            show: false,
                        },
                        data: [
                            {
                                value: 0.5,
                            },
                        ],
                        z: 3,
                    },
                ],
            });

            return () => {
                chart.dispose();
            };
        }
    }, []);

    useEffect(() => {
        if (ChartRef.current) {
            console.log("更新data", data);
            ChartRef.current.setOption({
                series: [
                    {
                        data: [
                            {
                                value: data,
                            },
                        ],
                    },
                ],
            });
        }
    }, [data]);

    return <ChartWarp ref={divRef}></ChartWarp>;
};

export default GaugeChart;

const ChartWarp = styled.div`
    width: 100px;
    height: 100px;
`;
